<template>
        <mian-layout style="background:#fff">
            <el-form :model="ruleForm" size="small" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm">
                
                <el-form-item label="AR头图" prop="headUrl">
                  <my-upload-file v-model='ruleForm.headImageUrl' :disabled="onlyLook==1"/>
                </el-form-item>

                <el-form-item label="地标名称" prop="name">
                  <el-input v-model="ruleForm.name" placeholder="地标名称" style="width: 400px;" :disabled="onlyLook==1"/>
                </el-form-item>

                <el-form-item label="地标副标题" prop="subtitle">
                  <el-input v-model="ruleForm.subtitle" placeholder="地标副标题" style="width: 400px;" :disabled="onlyLook==1"/>
                </el-form-item>

                <el-form-item label="地标区域关联">
                  <Address ref="eleAddress" v-model="addressCode" width="400px"  :disabled="onlyLook==1"/>
                </el-form-item>

                <el-form-item label="地标定位地址" >
                  <el-input v-model="ruleForm.locationAddress" placeholder="地标定位地址"  style="width: 400px;" :disabled="onlyLook==1"/>
                </el-form-item>

                <el-form-item label="经纬度">
                      <div style="display: inline;padding-right:5px">
                        <el-input v-model="ruleForm.locationLongitude" placeholder="经度" style="width: 195px;" :disabled="onlyLook==1"/>
                      </div>
                      <el-input v-model="ruleForm.locationLatitude" placeholder="纬度" style="width: 200px;" :disabled="onlyLook==1"/>
                      <span style="padding-left:10px"><el-button type="primary" plain @click="openMap">地图选择</el-button></span>
                </el-form-item>
 

                <el-form-item label="关联U3D城市地标">
                  <!-- <u3dAarSceneSelect ref="u3dEle" v-model="ruleForm.u3dSceneId" valuekey="u3dSceneId" label="sceneName" width="400px"/> -->
                  <u3d-scene-select ref="u3dEle" :defaultTxt="defaultTxt" :type="3" v-model="ruleForm.u3dSceneId" width="400px" :disabled="onlyLook==1"/>
                </el-form-item>

                <el-form-item label="商业面积">
                  <el-input v-model="ruleForm.commercialArea" placeholder="商业面积" style="width: 400px;" :disabled="onlyLook==1" @keyup.native="clearNoNum($event,'commercialArea')"/> m²
                </el-form-item>

                <el-form-item label="覆盖人群">
                  <el-input v-model="ruleForm.coveragePopulation" placeholder="覆盖人群（万人）" style="width: 400px;" :disabled="onlyLook==1" @keyup.native="clearNoNum($event,'coveragePopulation')"/> 万人
                </el-form-item>

                <el-form-item label="预估人流量">
                  <el-input v-model="ruleForm.visitorsFlowrate" placeholder="预估人流量" style="width: 400px;" :disabled="onlyLook==1"  @keyup.native="clearNoNum($event,'visitorsFlowrate')"/> 人/小时
                </el-form-item>

                <el-form-item label="经济体量">
                  <el-input v-model="ruleForm.economicVolume" placeholder="经济体量（万亿美元）" style="width: 400px;" :disabled="onlyLook==1" @keyup.native="clearNoNum($event,'economicVolume')"/> 万亿美元
                </el-form-item>

                <el-form-item label="AR视频" prop="videoUrl">
                  <div style="width:600px"><my-upload-file v-model='ruleForm.videoUrl' fileType='video' :disabled="onlyLook==1"/></div>
                </el-form-item>

                <el-form-item label="AR地标其他图片" prop="backgroundUrl">
                      <div class="colFlex" v-for="(dt,i) in ruleForm.arLandmarkFiles" :key="i">
                        <my-upload-file v-model='dt.fileURl' :disabled="onlyLook==1"/>
                        <div class="cfItem">
                          <el-input v-model="dt.remarks" type="textarea" placeholder="文字内容" :autosize="{ minRows: 6, maxRows: 10}" style="width: 442px;" :disabled="onlyLook==1"/>
                        </div>
                      </div>
                      <div class="addBtnBox" v-if="onlyLook!=1">
                        <el-button @click="addImg(1)" type="primary" size="mini" plain icon="el-icon-plus"></el-button>
                        <el-button @click="addImg(-1)" type="primary" size="mini" plain icon="el-icon-minus"></el-button>
                      </div>
                </el-form-item>

                <el-form-item>
                    <template>
                        <template v-if="onlyLook==1">
                            <el-button icon="el-icon-back" @click="$router.back()" type="info">返回</el-button>
                            <el-button type="success" icon="el-icon-edit" @click="onlyLook=2">修改</el-button>
                        </template>
                        <template v-else>
                            <el-button type="primary" icon="el-icon-check" :loading="btnLoading" @click="save('ruleForm')">保存</el-button>
                            <my-back icon="el-icon-close">取消</my-back>
                        </template>
                    </template>
                </el-form-item>
            </el-form>
            <my-dialog v-if="dialogVisible" :show.sync="dialogVisible" :showBtn="false" width="960px" title="选择经纬度">
                <MapContainer ref="aMap" :showMap="true" @getPoint="getPoint" :center='`${ruleForm.cityName}${ruleForm.districtName}`' :point="defaultPoint"/> 
            </my-dialog>
        </mian-layout>
        
</template>

<script>
import {mapGetters} from 'vuex'
import {
  addArLandmark,
  get_Landmark_details,
  edit_Landmark_data,
  getArSceneList
} from '@/api/arApi'
import myUploadFile from '@/components/public/myUploadFile.vue'
import Address from '@/components/public/address.vue'
import u3dSceneSelect from '@/components/public/u3dSceneSelect.vue'
import {mergeObject,filterStr} from '@/utils/index'
import myBack from '@/components/public/myBack.vue'
import MapContainer from '@/components/public/MapContainer.vue'
import myDialog from '@/components/public/myDialog';
export default {
  name: '',
  components:{
    myUploadFile,
    Address,
    u3dSceneSelect,
    myBack,
    MapContainer,
    myDialog
  },
  data() {
    return {
      ruleForm: {
        provinceCode:'',
        provinceName:'',
        cityCode:'',
        cityName:'',
        districtCode:'',
        districtName:'',
        commercialArea:'',
        coveragePopulation:'',
        economicVolume:'',
        headImageUrl:'',
        locationAddress:'',
        locationLatitude:'',
        locationLongitude:'',
        name:'',
        subtitle:'',
        u3dMapId:'',	// U3D地图ID，查询：/boss/arscene/list
        u3dSceneId:'',// U3D场景ID，查询：/boss/arscene/list
        videoUrl:'',
        visitorsFlowrate:'',
        visitPvCount:'',	//运营维护的访问量(关注度)PV	
        visitPvMonthCount:'',	//运营维护的月访问量(关注度)PV
        visitUvCount:'',	//运营维护的访问量(关注度)UV
        visitUvMonthCount:'',	//运营维护的月访问量(关注度)UV
        arLandmarkFiles:[
          {
            fileURl:'',
            remarks:''
          }
        ],
      },
      addressCode:[],
      rules: {},
      defaultTxt:'',
      details:'',
      apiAddressCodes:[],
      id:'',
      onlyLook:'',
      dialogVisible:false,
      defaultPoint:{},
      btnLoading:false
    }
  },
  async created() {
    this.id = this.$route.query.id
    this.onlyLook = this.$route.query.onlyLook
    if(this.id){  // 编辑、查看
      const res = await get_Landmark_details(this.id)
      if(res.success){
        this.details = res.data
        this.ruleForm = mergeObject(this.ruleForm,res.data)
        // 省市区
        this.addressCode = []
        res.data.provinceCode	&& (this.addressCode = [...this.addressCode,res.data.provinceCode.substring(0,6)])
        res.data.cityCode	&& (this.addressCode = [...this.addressCode,res.data.cityCode.substring(0,6)])
        res.data.districtCode	&& (this.addressCode = [...this.addressCode,res.data.districtCode.substring(0,6)])
        this.apiAddressCodes = [...this.addressCode]

        
        if(res.data.arLandmarkFileDtos && res.data.arLandmarkFileDtos.length>0){
          this.ruleForm.arLandmarkFiles = res.data.arLandmarkFileDtos
        }

        this.defaultPoint.lng = res.data.locationLongitude
        this.defaultPoint.lat = res.data.locationLatitude

        // 处理u3d地标
        getArSceneList({u3dMapId:res.data.u3dMapId})  // 获取u3d场景数据
        .then(res =>{
            let sceneNames = []
            res.data.forEach(item => {
                sceneNames.push(item.sceneName)
            });
            this.defaultTxt = sceneNames.join(',')
        })
      }
    }
  },
  methods: {
    getPoint(obj){
      console.log("RRRR:",obj)
      this.ruleForm.locationLatitude = obj.lat,
      this.ruleForm.locationLongitude = obj.lng
      obj.address && (this.ruleForm.locationAddress = obj.address) 
      this.dialogVisible = false
    },
    addImg(num){
        if(num==1){
          //this.ruleForm.arLandmarkFiles = [...this.ruleForm.arLandmarkFiles,{fileURl:'',remarks:''}]
          this.ruleForm.arLandmarkFiles.push({fileURl:'',remarks:''})
        }else{
          this.ruleForm.arLandmarkFiles.length>1 && this.ruleForm.arLandmarkFiles.pop()
        }
    },
    // 确定
    save(formName) {
      
      if(!this.ruleForm.headImageUrl){
        return this.$message.warning('请上传AR头图')
      }else if(!this.ruleForm.name){
        return this.$message.warning('请输入地标名称')
      }else if(!this.ruleForm.subtitle){
        return this.$message.warning('请输入地标副标题')
      }else if(!this.addressCode || this.addressCode.length<1){
        return this.$message.warning('请选择关联的区域')
      }else if(!this.ruleForm.locationAddress){
        return this.$message.warning('请输入地标定位地址')
      }else if(!this.ruleForm.locationLongitude){
        return this.$message.warning('请输入地标定位经度')
      }else if(!this.ruleForm.locationLatitude){
        return this.$message.warning('请输入地标定位维度')
      }else if(!this.ruleForm.u3dSceneId){
        return this.$message.warning('请选择关联U3D城市地标')
      }else if(!this.ruleForm.commercialArea){
        return this.$message.warning('请输入商业面积')
      }else if(!this.ruleForm.coveragePopulation){
        return this.$message.warning('请输入覆盖人群')
      }else if(!this.ruleForm.visitorsFlowrate){
        return this.$message.warning('请输入预估人流量')
      }else if(!this.ruleForm.economicVolume){
        return this.$message.warning('请输入经济体量')
      }
      // else if(!this.ruleForm.videoUrl){
      //   return this.$message.warning('请上传AR视频')
      // }
      
      //this.btnLoading = true
      if(this.id){  // 编辑
          if(this.ruleForm.u3dSceneId!=this.details.u3dSceneId){
              // 获取u3d地图id
              this.ruleForm.u3dMapId = this.$refs.u3dEle.getKeyValue('u3dMapId')
          }
          if(this.apiAddressCodes.join(',')!=this.addressCode.join(',')){
            this.getAddress()  // 处理地址
          }
          edit_Landmark_data({arLandmarkId:this.id,...this.ruleForm}).then(res=>{
            if(res.success){
              this.$message.success('修改成功！')
              //this.$router.back()
              this.$store.dispatch('tagsView/myClosePageTab',this.$route)
            }else{
              //this.$message.error("修改失败")
            }
            this.btnLoading = false
          })
      }else{  //新增
          // 获取u3d地图id
          this.ruleForm.u3dMapId = this.$refs.u3dEle.getKeyValue('u3dMapId')
          this.getAddress()  // 处理地址
          addArLandmark(this.ruleForm).then(res=>{
            if(res.success){
              this.$message.success('新增成功！')
              //this.$router.back()
              this.$store.dispatch('tagsView/myClosePageTab',this.$route)
            }else{
              //this.$message.error("新增失败")
            }
            this.btnLoading = false
          })
      }
      
    },
    getAddress(){
        //  处理地址选择
        const adObj = this.$refs.eleAddress.getCheckedNodes()
        if(!adObj) return
        this.ruleForm.provinceCode = adObj.province.code || ''
        this.ruleForm.provinceName = adObj.province.name || ''
        this.ruleForm.cityCode = adObj.city.code || ''
        this.ruleForm.cityName = adObj.city.name || ''
        this.ruleForm.districtCode = adObj.district.code || ''
        this.ruleForm.districtName = adObj.district.name || ''
    },
    openMap(){
      if(this.addressCode && this.addressCode.length>0){
        this.getAddress()
      }
      this.dialogVisible=true
    },
    clearNoNum(e,prop){
      let o = e.target
      o.value = o.value.replace(/[^\d.]/g,"") //清除"数字"和"."以外的字符
      o.value = o.value.replace(/^\./g,"");//验证第一个字符是数字而不是字符
      o.value = o.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");//只保留第一个.清除多余的
      this.ruleForm[prop] = o.value
    }
  }
}
</script>

<style lang="scss" scoped>
  .colFlex{
  display: flex;
  .cfItem{
    flex: 1;
    padding: 0 0 0 10px;
  }
  &+.colFlex{
    margin: 10px 0 0 0;
  }
}
.addBtnBox{
  padding: 10px 0 0 0;
}
</style>

<style lang="scss">
  .colFlex textarea{
    height: 148px !important;
  }
</style>


